<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <meta charset="UTF-8">
    <!-- 引用jQuery库 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            // 当页面加载完成时执行以下代码
            $("#login").click(function() {
                // 当“Login”按钮被点击时执行以下代码
                var username = $("#username").val(); // 获取输入框中的用户名
                var password = $("#password").val(); // 获取输入框中的密码
                var url = "http://localhost:8081/api/user/login?username=" + username + "&password=" + password; // 构造用于登录的URL
                $.get(url, function(data) { // 发送GET请求
                    if (data.code == 200) { // 如果返回码为200则表示登录成功
                        localStorage.setItem("token", data.data); // 将token保存到localStorage中
                        alert("Login successful!"); // 弹出登录成功提示框
                    } else {
                        alert("Login failed: " + data.msg); // 弹出登录失败提示框
                    }
                });
            });

            $("#get-data").click(function() {
                // 当“Get Data”按钮被点击时执行以下代码
                var token = localStorage.getItem("token"); // 获取localStorage中保存的token
                if (token == null || token == "") {
                    alert("Please login first!"); // 如果token为空则表示未登录，弹出提示框
                    return;
                }
                var url = "http://localhost:8081/api/user"; // 构造请求数据的URL
                $.ajax({
                    url: url,
                    type: "GET",
                    headers: {
                        "token": token // 在请求头中添加token
                    },
                    success: function(data) { // 请求成功回调函数
                        $("#result").val(JSON.stringify(data)); // 将返回的数据展示到文本框中
                    },
                    error: function(xhr, status, error) { // 请求失败回调函数
                        alert("Error: " + error); // 弹出错误提示框
                    }
                });
            });
        });
    </script>
</head>
<body>
<h1>Welcome to My Page</h1>
<form>
    <label for="username">Username:</label>
    <input type="text" name="username" id="username"><br><br>
    <label for="password">Password:</label>
    <input type="password" name="password" id="password"><br><br>
    <input type="button" value="Login" id="login"> <!-- 点击该按钮发起登录请求 -->
</form>
<br>
<textarea id="result" rows="10" cols="50"></textarea><br>
<input type="button" value="Get Data" id="get-data"> <!-- 点击该按钮发起获取数据请求 -->
</body>
</html>